<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery-3.3.1.js"></script>
    <meta charset="UTF-8">
    <title>修改昵称</title>
    <style>
        html,
        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        h1 {
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-bottom: 10px;
        }

        input {
            padding: 5px;
        }

        button {
            padding: 10px;
        }
    </style>

</head>
<body>
<div class="container">
    <h1>修改账号</h1>
    <form id="updateNickNameForm">
        <label for="nickname">新账号：</label>
        <input type="text" id="nickname" name="nickname" required>
        <br>
        <button type="submit">保存</button>
        <br>
        <button type="button" onclick="window.location.href='person.html'">返回</button>
    </form>
</div>
</body>
<script>
    document.getElementById('updateNickNameForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        const formData = new FormData(event.target); // 收集表单数据

        // 获取迭代器
        const iterator = formData.entries();

        // 获取第一个键值对
        const firstEntry = iterator.next().value;

        // 转换为对象
        const firstKeyValue = Object.fromEntries([firstEntry]);

        // 使用 AJAX 发送数据
        $.ajax({
            url: '/user/updateNickName',
            method: 'POST',
            data: firstKeyValue,
            success: function (response) {
                alert("修改成功!");
            },
            error: function (xhr, status, error) {
                alert("修改失败!");
            }
        });

    });
</script>
</html>